<template>
	<div class="card content-box">
		<el-alert
			title="SVG 图标目前使用 vite-plugin-svg-icons 插件完成，官方文档请查看 ：https://github.com/vbenjs/vite-plugin-svg-icons"
			type="warning"
			:closable="false"
		/>
		<br />
		<div class="icon-list">
			<SvgIcon name="xianxingdaoyu" />
			<SvgIcon name="xianxingdiqiu" />
			<SvgIcon name="xianxingditu" />
			<SvgIcon name="xianxingfanchuan" />
			<SvgIcon name="xianxingfeiji" />
			<SvgIcon name="xianxinglvhangriji" />
			<SvgIcon name="xianxingtianqiyubao" />
			<SvgIcon name="xianxingxiangjipaizhao" />
			<SvgIcon name="xianxingxiarilengyin" />
			<SvgIcon name="xianxingyoulun" />
			<SvgIcon name="xianxingxiarilengyin" />
		</div>
		<el-descriptions title="配置项 📚" :column="1" border>
			<el-descriptions-item label="name"> 图标的名称，svg 图标必须存储在 src/assets/icons 目录下 </el-descriptions-item>
			<el-descriptions-item label="prefix"> 图标的前缀，默认为 "icon" </el-descriptions-item>
			<el-descriptions-item label="iconStyle"> 图标的样式，默认样式为 { width: "100px", height: "100px" } </el-descriptions-item>
		</el-descriptions>

		<h1>SVG图标组件</h1>
		<el-row>
			<el-col class="icon-card" :span="4" v-for="(icon, index) in svgList" :key="index">
				<SvgIcon :name="icon" />
				<div class="icon-name">{{ icon }}</div>
			</el-col>
		</el-row>
		<h1>element-plus icon</h1>
		<div style="display: flex; flex-wrap: wrap">
			<div v-for="(name, index) in elementIcons" :key="index">
				<component :is="name" style="width: 2rem; margin-left: 2rem" :index="index"></component>
				<div class="icon-name">{{ name }}</div>
			</div>
		</div>
	</div>
</template>

<script setup lang="ts" name="svgIcon">
import SvgIcon from '@/components/SvgIcon/index.vue'
import ids from 'virtual:svg-icons-names'
import * as Icons from '@element-plus/icons-vue'
const svgList: Array<string> = []
ids.forEach(element => {
	svgList.push(element.replace(/icon-/g, ''))
})

let elementIcons: Array<string> = []
for (const name in Icons) {
	elementIcons.push(name)
}
console.log('elementIcons', elementIcons)
</script>

<style scoped lang="scss">
@import './index.scss';
.icon-name {
	text-align: center;
}
</style>
